<link rel="stylesheet" href="resource/css/swiper.min.css" />
<script type="text/javascript" src="resource/js/swiper.min.js" ></script>
<script type="text/javascript"  src="resource/js/main.js"></script>
<style>
    .footer-home{display: none}
</style>
<header>
    <a href="index.php?act=ticket">
        <i class="iconfont icon-xialalan-copy"></i>
    </a>
    <span><?php echo $output['ticket_info']['tk_title']; ?></span>
</header>


        <div class="home-slide swiper-container margin_bot" >
            <div class="play_autio" style="display: none;" >
                    <i class="iconfont icon-zanting" onclick="smollbtn()"></i>
                    “<?php echo $output['ticket_info']['tk_title']; ?>语音导游”
                    <i class="iconfont icon-guanbi fr" onclick="stop()"></i>
                  </div>
            <ul class="slider swiper-wrapper" >
                <?php if($output['images']){ ?>
                    <?php foreach($output['images'] as $key =>$vo){?>
                        <li class="swiper-slide"><img src="<?php echo $vo['img_path']; ?>" /></li>
                    <?php  }?>
                <?php }else{ ?>
                    <img src="resource/images/hotel.jpg" />
                <?php  }?>
            </ul>

        </div>


        <!--<img src="image/hotel.jpg" alt="酒店环境图片"/>-->
<div class="box_pos">
    <ul class="ul_mar box_shadow">
        <li class="ul_info p-1" onclick="checkMap('<?php echo $output['ticket_info']['tk_full_addr']; ?>','<?php echo HOST_URL; ?>')">
            <i class="icon_1 iconfont icon-diliweizhi"></i><span class="p-2"><?php echo $output['ticket_info']['tk_full_addr']; ?></span>
            <a <!--href="index.php?act=map&op=index&addr=--><?php /*echo $output['ticket_info']['tk_full_addr']; */?>" class="fr font_s">

                <span class="rotate iconfont icon-xialalan-copy font_s"></span>
            </a>
        </li>
        <li class="ul_info" onclick="window.location.href='tel:<?php echo $output['ticket_info']['tk_tel']; ?>'">
            <i class="icon_1 iconfont icon-dianhua"></i><?php echo $output['ticket_info']['tk_tel']; ?>
            <a  class="fr font_s">
                <span class="rotate iconfont icon-xialalan-copy font_s"></span>
            </a>
        </li>
    </ul>

    <div class="room_list box_shadow">
        <div class="de_title div_padding de_title_bottom">
            <i class="icon_1  iconfont icon-jingdian1"></i>
            <?php echo $output['ticket_info']['tk_title']; ?>简介
            <?php if(!empty($output['ticket_info']['audio'])):?>
            <a  class="fr video_btn" id="voice_play" onclick="stop()"><i class="iconfont icon-yuyin"></i>语音播报</a>
            <?php endif; ?>
        </div>
        <div class="ui-tab " >
        <div id="info-manager-content" class="info-shrink-text">
            <?php echo $output['ticket_info']['tk_detail']; ?>
        </div>
        <div class="div_1"><i class="more-text iconfont icon-xialalan"></i></div>
        </div>

    </div>
    <div class="room_list box_shadow">
        <div class="de_title div_padding de_title_bottom">
            <i class="icon_1  iconfont icon-menpiao"></i>
            景点门票
        </div>
        <ul class="room_ul">
            <?php foreach($output['spec_list'] as $key => $value): ?>
            <li>
                <a href="index.php?act=ticket&op=detail&tid=<?php echo $output['ticket_info']['tk_id'] ?>&sid=<?php echo $value['spec_id']; ?>">
                    <div class="room_pic">
                        <img src="<?php echo  $value['surface_img']; ?>" />
                    </div>
                    <span class="room_title p-1"><?php echo $value['spec_name']; ?></span>
                    <span class="area"><?php echo $value['label']; ?></span>
                    <span class="dis">优惠已减<i class="iconfont icon-renminbi"><?php echo $value['market_price']-$value['price']?></i></span>
                    <span class="money connect "><i class="iconfont icon-renminbi"><?php echo $value['price']; ?></i></span>
                    <span class="price_1"><i class=" iconfont icon-renminbi"><?php echo $value['market_price']; ?></i></span>
                    <a class="booking" href="index.php?act=ticket&op=detail&tid=<?php echo $output['ticket_info']['tk_id'] ?>&sid=<?php echo $value['spec_id']; ?>">预定</a>
                </a>
            </li>
            <?php endforeach;  ?>
        </ul>
    </div>
    </div>
<div class="holl" style="display: none;">

    <!--语音导游正常模式-->
    <div class="play_box" style="display: none;">
        <div class="play_pic fl">
            <img src="<?php echo $output['ticket_info']['tk_thumb']; ?>" />
        </div>
        <div class="play_info fr">
            <i class="iconfont icon-guanbi"onclick="win_down()"></i>
            <p class="p-3"><?php echo $output['ticket_info']['tk_subtitle']; ?></p>
            <a  class="star_play" id="play" onclick="playpause()"><i class="iconfont icon-bofanganniu"></i>
                <span>开始播放</span>
            </a>
            <a  onclick="win_down()"><i class="iconfont icon-suofang"></i>窗口缩小</a>
        </div>
    </div>


    <!--语音导游放大模式-->
    <div class="play_box_big" style="display: none;">
        <div class="play_box_big_pic">
            <img src="<?php echo $output['ticket_info']['tk_thumb']; ?>" />
            <i class="iconfont icon-guanbi" id="close"></i>
        </div>
        <div class="play_box_big_info">
            <p class="p-3">
                <?php echo $output['ticket_info']['tk_subtitle']; ?>
            </p>
            <div class="video">
                <audio  id="js-video">
                    <!--<source src="Files/Audio/2017-08/e259d760-5f1a-4ae0-a838-34d237ea93cc.mp3" type="audio/mp3">-->
                    <source src="<?php echo $output['ticket_info']['audio']; ?>" type="audio/mp3">
                </audio>
                <div class="progress_bar_bg">
                </div>

            </div>
        </div>
    </div>

</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,
        autoplayDisableOnInteraction: false
    });
    //多房间展示
    var z=1;
    $(".more").on("click",function () {
        $(".room_more").slideToggle();
        $(this).find(".rotate").css("transform","rotate("+z*180+"deg)");
        ++z;
    });



    var my_audio= document.getElementById("js-video");
    function playpause() {
        if(my_audio.paused){
            $(".play_box_big").show();
            $("#play").find("i").removeClass("icon-bofanganniu").addClass("icon-zanting");
            $("#play").children("span").html('暂停播放');
            my_audio.play();

            vedio_run();

        }else {
            $("#play").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
            $("#play").children("span").html('开始播放');
            my_audio.pause();
        }
    }


    //更新进度条

    //        var value = 0;
    function vedio_run() {
        var value = parseInt(my_audio.currentTime/ my_audio.duration*100);
        $(".progress_bar_bg").css("width",value+'%');
        if(value>=100){
            my_audio.pause();
            return 1;
        }
        setTimeout("vedio_run()",1000);

    }


    function smollbtn() {
        if(my_audio.paused){
            $(".play_autio").find("i").removeClass("icon-bofanganniu").addClass("icon-zanting");
            my_audio.play();
        }else {
            $(".play_autio").find("i").removeClass("icon-zanting").addClass("icon-bofanganniu");
            my_audio.pause();
        }
    }

    function stop() {
        $(".play_autio").hide();
        my_audio.pause();
    }


    /*触发语音导游弹窗*/
    $("#voice_play").click(function () {
        $(".holl").show();
        $(".play_box").show();
    });

    //窗口缩小
    function win_down() {
        $(".play_autio").show();
        $(".play_box").hide();
        $(".holl").hide();
    }

    //关闭大窗口
    $("#close").click(function () {
        $(".play_box_big").hide();
        $(".play_box").show();
    });
    $(".play_autio").find("icon-zanting").click(function () {
        if($(this).className=='icon-zanting'){
            $(this).removeClass("icon-zanting").addClass("icon-bofanganniu");
        }
        else {
            $(this).removeClass("icon-bofanganniu").addClass("icon-zanting");
        }

    });


    $(".play_autio").find(".icon-guanbi").click(function () {
        $(this).parent().hide();
    });

</script>